<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>插入方法</title>
	</head>
	<body>
		<ol id="ol">
			<li>0</li>
			<li>1</li>
			<li>2</li>
		</ol>

		<script>
			// 以下方法，如果传入 HTML字符串形式的节点 则显示的还是字符串形式的内容，而一些特殊的符号 <、> 会被转义。

			ol.before('before') // 将字符串 "before" 插入到 <ol> 的前面
			ol.after('after') // 将字符串 "after" 插入到 <ol> 的后面

			let liFirst = document.createElement('li')
			liFirst.innerHTML = 'prepend'
			ol.prepend(liFirst) // 将 liFirst 插入到 <ol> 内部的最开始

			let liLast = document.createElement('li')
			liLast.innerHTML = 'append'
			ol.append(liLast) // 将 liLast 插入到 <ol> 内部的最后

			let li = document.createElement('li')
			li.innerHTML = 'replaceWith'
			ol.children[1].replaceWith(li) // 将 node 替换为给定的节点或字符串。
		</script>

		<hr />

		<!-- 将HTML字符串插入到元素中 -->
		<div id="div">DIV</div>
		<script>
			// "beforebegin" —— 将 html 插入到 elem 之前，
			div.insertAdjacentHTML('beforebegin', '<p>insertAdjacentHTML-start</p>')

			// "afterbegin" —— 将 html 插入到 elem 开头，
			div.insertAdjacentHTML('afterbegin', '<p>DIV-before</p>')

			// "beforeend" —— 将 html 插入到 elem 末尾，
			div.insertAdjacentHTML('beforeend', '<p>DIV-before</p>')

			// "afterend" —— 将 html 插入到 elem 之后。
			div.insertAdjacentHTML('afterend', '<p>insertAdjacentHTML-end</p>')
		</script>

		<hr />

		<!-- 交换节点，无须删除旧位置的节点，所有插入方法都会自动删除旧位置的节点 -->
		<div id="div1">DIV1</div>
		<div id="div2">DIV2</div>
		<script>
			div1.before(div2)
		</script>
	</body>
</html>
